<template>
    <el-form-item>
        <el-button @click="onSubmit">保存</el-button>
    </el-form-item>
    <h2 style="margin-left: 400px;">报工单据</h2>
    <table class="order-table">
        <tr>
            <th colspan="6" style="text-align: left;">基本信息</th>
        </tr>
        <tr>
            <td>检验标准：</td>
            <td><el-input v-model="form.inspectionStandards" placeholder="请输入检验标准" /></td>
            <td>检验结果：</td>
            <td colspan="3">
                <el-radio-group v-model="form.testResults">
                    <el-radio label="合格">合格</el-radio>
                    <el-radio label="不合格">不合格</el-radio>
                </el-radio-group>
            </td>
        </tr>
        <tr>
            <td>不合格数量：</td>
            <td><el-input v-model="form.unqualifiedNum" :disabled="isDisabled" placeholder="请输入不合格数量" /></td>
            <td>合格数量：</td>
            <td><el-input v-model="form.hegeNum" :disabled="isHegeDisabled" placeholder="请输入合格数量" /></td>
        </tr>
        <tr>
            <td>不合格原因：</td>
            <td colspan="3"><el-input v-model="form.unqualifiedCause" :disabled="isDisabled" type="textarea" placeholder="请输入不合格原因"/></td>
        </tr>
        <tr>
            <td>处理措施：</td>
            <td colspan="3"><el-input v-model="form.unqualifiedMeasure" type="textarea" placeholder="请输入处理措施"/></td>
        </tr>
    </table>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, watch } from 'vue'
import dayjs from 'dayjs'
import { useCounterStore } from "@/stores/counter";
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
import {read,write} from '@/axios/axiosHelper'

const router = useRouter()
const route = useRoute()

const store = useCounterStore();

// 确保 route.query.packagingPlanId 存在再赋值
const packagingPlanId = route.query.packagingPlanId || '';

const form = reactive({
    inspectionStandards: '',
    testResults: '合格',
    unqualifiedNum: '0',
    hegeNum: '', // 初始化合格数量为0
    unqualifiedCause: '无',
    unqualifiedMeasure: '',
    packagingPlanId: packagingPlanId,
});

console.log(route.query.packagingPlanId)

const isDisabled = computed(() => form.testResults === '合格');
const isHegeDisabled = computed(() => form.testResults === '不合格'); // 计算合格数量输入框的禁用状态

watch(() => form.testResults, (newValue) => {
    if (newValue === '合格') {
        form.unqualifiedNum = '0';
        form.unqualifiedCause = '无';
    } else {
        form.unqualifiedNum = '';
        form.unqualifiedCause = '';
        form.hegeNum = '0'; // 当检验结果为不合格时，设置合格数量为0
    }
});

const onSubmit = () => {
    console.log('提交的表单数据:', form); // 打印表单数据，检查 packagingPlanId 是否有值
    write.post("p2-write/api/Report/CreateReport", form)
        .then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.msg);
                router.push('/QueryReport')
            } else {
                ElMessage.error(res.data.msg);
                return;
            }
        })
}
</script>

<style scoped>
.order-table {
    border-collapse: collapse;
    width: 100%;
}

.order-table th,
.order-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}

.order-table th {
    background-color: #f2f2f2;
}
</style>

<style scoped>
#app {
    padding: 20px;
}
</style>